<template>
	<image class="self-icon" :style="'border-radius:' + radius" :class="cssAnimate" :src="src" mode="scaleToFill" @click="animateImage"></image>
</template>

<script>
import date from '@/utils/date.js';
export default {
	props: {
		src: {
			type: String,
			default: ''
		},
		radius: {
			type: String,
			default: '50%'
		}
	},
	data() {
		return {
			cssAnimate: ''
		};
	},
	methods: {
		//制作动画
		animateImage() {
			let index = Math.floor(Math.random() * (10 - 1)) + 1;
			switch (index) {
				case 1:
					this.cssAnimate = 'animate__animated animate__shakeY';
					break;
				case 2:
					this.cssAnimate = 'animate__animated animate__rubberBand';
					break;
				case 3:
					this.cssAnimate = 'animate__animated animate__heartBeat';
					break;
				case 4:
					this.cssAnimate = 'animate__animated animate__flash';
					break;
				case 5:
					this.cssAnimate = 'animate__animated animate__bounceIn';
					break;
				case 6:
					this.cssAnimate = 'animate__animated animate__fadeInDown';
					break;
				case 7:
					this.cssAnimate = 'animate__animated animate__flip';
					break;
				case 8:
					this.cssAnimate = 'animate__animated animate__rotateIn';
					break;
				case 9:
					this.cssAnimate = 'animate__animated animate__zoomIn';
					break;
				case 10:
					this.cssAnimate = 'animate__animated animate__zoomInDown';
					break;
			}
		}
	}
};
</script>

<style>
.self-icon {
	width: 100%;
	height: 100%;
}
</style>
